<template>
  <view class="change-password-container">
    

    <view class="change-password-form">
      <view class="form-item">
        <text class="form-label">原密码</text>
        <uni-easyinput class="form-input" type="password" v-model="oldPassword" placeholder="请输入原密码" :inputBorder="false" />
      </view>

      <view class="form-item">
        <text class="form-label">新密码</text>
        <uni-easyinput class="form-input" type="password" v-model="newPassword" placeholder="请输入新密码" :inputBorder="false" />
        <view class="password-tips">
          <text>密码需为8-16位，包含大小写字母和数字</text>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">确认密码</text>
        <uni-easyinput class="form-input" type="password" v-model="confirmPassword" placeholder="请再次输入新密码" :inputBorder="false" />
      </view>

      <button class="submit-btn" @click="changePassword" :disabled="!canSubmit">确认修改</button>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  },
  computed: {
    canSubmit() {
      return this.oldPassword && this.newPassword && this.confirmPassword && this.newPassword === this.confirmPassword && this.validatePassword(this.newPassword);
    }
  },
  methods: {
    validatePassword(password) {
      // 密码验证：8-16位，包含大小写字母和数字
      const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
      return passwordRegex.test(password)
    },
    async changePassword() {
      // 再次验证密码
      if (!this.validatePassword(this.newPassword)) {
        uni.showToast({
          title: '密码不符合要求',
          icon: 'none'
        })
        return
      }

      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({
          title: '两次密码输入不一致',
          icon: 'none'
        })
        return
      }

      try {
        const sorterAccount = uni.getStorageSync('sorterAccount')
        const res = await request({
          url: '/sorter/changePassword',
          method: 'POST',
          data: {
            account: sorterAccount,
            oldPassword: this.oldPassword,
            newPassword: this.newPassword
          }
        })

        if (res.code === 200) {
          uni.showToast({
            title: '密码修改成功',
            icon: 'success',
            duration: 2000
          })

          // 延迟返回个人中心页面
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        } else {
          uni.showToast({
            title: res.message || '密码修改失败',
            icon: 'none'
          })
        }
      } catch (err) {
        console.error('密码修改失败:', err)
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        })
      }
    }
  }
};
</script>

<style scoped>
.change-password-container {
  background-color: #f4f4f4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.change-password-header {
  background-color: #007aff;
  color: white;
  padding: 20px;
  text-align: center;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

.change-password-form {
  background-color: white;
  margin: 20px;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 20px;
  position: relative;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.form-input {
  --easyinput-border-radius: 10px;
  --easyinput-border-color: #e0e0e0;
  --easyinput-border-width: 1px;
  --easyinput-background-color: #f4f4f4;
  --easyinput-height: 50px;
}

.password-tips {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  text-align: left;
}

.submit-btn {
  width: 100%;
  background-color: #007aff;
  color: white;
  border-radius: 10px;
  padding: 15px 0;
  margin-top: 20px;
  font-size: 16px;
}

.submit-btn:disabled {
  background-color: #b0d4f9;
  color: rgba(255, 255, 255, 0.7);
}
</style>
